<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { login, register } from '@/api/login';

const router = useRouter();
const isLogin = ref(true); // 控制显示登录还是注册
const isFlipping = ref(false); // 控制翻转动画

const loginForm = ref({
  username: '',
  password: ''
});

const registerForm = ref({
  username: '',
  password: '',
  confirmPassword: '',
  email: ''
});

// 表单验证
const validateLogin = () => {
  if (!loginForm.value.username.trim()) {
    alert('请输入用户名');
    return false;
  }
  if (!loginForm.value.password) {
    alert('请输入密码');
    return false;
  }
  return true;
};

const validateRegister = () => {
  if (!registerForm.value.username.trim()) {
    alert('请输入用户名');
    return false;
  }
  if (!registerForm.value.password) {
    alert('请输入密码');
    return false;
  }
  if (registerForm.value.password !== registerForm.value.confirmPassword) {
    alert('两次密码不一致');
    return false;
  }
  if (!registerForm.value.email) {
    alert('请输入邮箱');
    return false;
  }
  return true;
};

const handleLogin = async () => {
  if (!validateLogin()) return;
  try {
    const res = await login(loginForm.value);
    if (res.code === 200) {
      // 保存 token
      localStorage.setItem('token', res.data.token);
      // 保存用户信息
      localStorage.setItem('user', JSON.stringify(res.data.user));
      // 跳转到首页
      router.push('/');
    } else {
      alert(res.message || '登录失败');
    }
  } catch (error) {
    console.error('Login error:', error);
    alert(error.response?.data?.message || '登录失败');
  }
};

const handleRegister = async () => {
  if (!validateRegister()) return;
  try {
    const { confirmPassword, ...registerData } = registerForm.value;
    const res = await register(registerData);
    if (res.code === 200) {
      alert('注册成功');
      isLogin.value = true; // 切换到登录表单
    } else {
      alert(res.message || '注册失败');
    }
  } catch (error) {
    console.error('Register error:', error);
    alert(error.response?.data?.message || '注册失败');
  }
};

// 切换登录/注册
const toggleForm = () => {
  isFlipping.value = true;
  setTimeout(() => {
    isLogin.value = !isLogin.value;
    isFlipping.value = false;
  }, 300);
};
</script>

<template>
  <div class="login-page">
    <div class="form-container" :class="{ 'is-flipping': isFlipping }">
      <!-- 登录表单 -->
      <div class="form-card login-card" :class="{ 'slide-left': !isLogin }">
        <div class="card-inner">
          <h2>登录</h2>
          <div class="form-group">
            <input 
              type="text" 
              v-model="loginForm.username"
              placeholder="用户名/邮箱/手机号"
            >
          </div>
          <div class="form-group">
            <input 
              type="password" 
              v-model="loginForm.password"
              placeholder="密码"
            >
          </div>
          <div class="form-options">
            <label>
              <input type="checkbox"> 记住我
            </label>
            <a href="#" class="forgot-password">忘记密码？</a>
          </div>
          <button class="submit-btn" @click="handleLogin">登录</button>
          <div class="switch-form">
            还没有账号？<a href="#" @click.prevent="toggleForm">立即注册</a>
          </div>
        </div>
      </div>

      <!-- 注册表单 -->
      <div class="form-card register-card" :class="{ 'slide-right': isLogin }">
        <div class="card-inner">
          <h2>注册</h2>
          <div class="form-group">
            <input 
              type="text" 
              v-model="registerForm.username"
              placeholder="用户名"
            >
          </div>
          <div class="form-group">
            <input 
              type="email" 
              v-model="registerForm.email"
              placeholder="邮箱"
            >
          </div>
          <div class="form-group">
            <input 
              type="password" 
              v-model="registerForm.password"
              placeholder="密码"
            >
          </div>
          <div class="form-group">
            <input 
              type="password" 
              v-model="registerForm.confirmPassword"
              placeholder="确认密码"
            >
          </div>
          <button class="submit-btn" @click="handleRegister">注册</button>
          <div class="switch-form">
            已有账号？<a href="#" @click.prevent="toggleForm">立即登录</a>
          </div>
        </div>
      </div>

      <!-- 右侧装饰 -->
      <div class="decoration" :class="{ 'flip': !isLogin }">
        <div class="decoration-content">
          <h1>{{ isLogin ? '童话' : '加入我们' }}</h1>
          <p>{{ isLogin ? '寻找对面的青山乡笑颜!' : '开启你的创作之旅！' }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  padding: 20px;

  .form-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    min-height: 600px;
    perspective: 1000px;

    &.is-flipping {
      .form-card, .decoration {
        transition: transform 0.6s ease-in-out;
      }
    }
  }

  .form-card {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.6s ease-in-out;

    &.login-card {
      left: 0;
      transform: translateX(0);
      z-index: 2;

      &.slide-left {
        transform: translateX(-100%);
      }
    }

    &.register-card {
      right: 0;
      transform: translateX(0);
      z-index: 1;

      &.slide-right {
        transform: translateX(100%);
      }
    }

    .card-inner {
      padding: 40px;
    }
  }

  .decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(135deg, #42b983 0%, #33a06f 100%);
    border-radius: 10px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s ease-in-out;
    z-index: 3;

    &.flip {
      transform: translateX(-100%);
    }

    .decoration-content {
      text-align: center;
      padding: 40px;

      h1 {
        font-size: 36px;
        margin-bottom: 20px;
        font-weight: 300;
      }

      p {
        font-size: 18px;
        opacity: 0.8;
      }
    }
  }

  // 表单样式
  .form-group {
    margin-bottom: 20px;

    input {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
      transition: all 0.3s;

      &:focus {
        border-color: #42b983;
        box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
        outline: none;
      }
    }
  }

  .submit-btn {
    width: 100%;
    padding: 12px;
    background: #42b983;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background: #3aa876;
    }
  }

  .switch-form {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #666;

    a {
      color: #42b983;
      text-decoration: none;
      margin-left: 5px;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .form-container {
      max-width: 400px;
    }

    .form-card {
      width: 100%;
    }

    .decoration {
      display: none;
    }
  }
}
</style> 